<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title><!--{$lang.page.index.title}--></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="/static/lay/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/lay/layui/index.css" media="all">
</head>
<body>

  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-body" style="padding: 15px;">
        <form name="addItem" method="post" lay-filter="component-form-group" class="layui-form">
          <input type="hidden" value="<!--{$datainfo.id}-->" name="id">

            <div class="layui-form-item">
              <div class="layui-inline" >
              <label class="layui-form-label"><!--{$lang.page.table.name}--></label>
              <div class="layui-input-inline">
               <input type="text" name="title" lay-verify="title" value="<!--{$datainfo.title}-->" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input" />
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">ICON <!--{$lang.page.table.icon}--></label>
              <div class="layui-input-inline">
                <select name="icon" class="layui-icon">
                   <option value=""><!--{$lang.page.public.select}-->icon</option>
                    <!--{foreach name=iconlist from=$iconlist item=item key=key}--> 
                   <option class="layui-icon" value="<!--{$item.iconfont}-->" <!--{if $item.iconfont eq $datainfo.icon}-->selected <!--{/if}-->><!--{$item.iconname}-->-&#<!--{$item.iconfont}--></option>
                    <!--{/foreach}-->
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label"><!--{$lang.page.table.addr}--></label>
              <div class="layui-input-inline" >
                <input type="text" name="code" lay-verify="code" value="<!--{$datainfo.code}-->" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input"/>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label"><!--{$lang.page.public.higher}--></label>
              <div class="layui-input-inline" >
                 <select name="pid" >
                   <option value="0"><!--{$lang.page.table.higtestmue}--></option>
                   <!--{foreach item=item from=$modulelist}-->
                   <option value="<!--{$item.id}-->" <!--{if $item.id eq $datainfo.pid}-->selected<!--{/if}-->><!--{$item.strsign}--><!--{$item.title}--></option>
                   <!--{/foreach}-->
              </select>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label"><!--{$lang.page.public.lang}--> key</label>
              <div class="layui-input-inline" >
                <input type="text" name="langkey" lay-verify="langkey" value="<!--{$datainfo.langkey}-->" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input" <!--{if !empty($datainfo.langkey)}-->readonly<!--{/if}-->/>
              </div>
            </div>

          </div>

            <div class="layui-form-item">
              <div class="layui-inline" >
              <label class="layui-form-label"><!--{$lang.page.table.topmue}--></label>
              <div class="layui-input-block">
              <input type="radio" name="is_top" value="0" title="<!--{$lang.page.table.no}-->" <!--{if $datainfo.is_top eq 0}--> checked<!--{/if}-->  >&nbsp;&nbsp;<input type="radio" name="is_top" value="1" title="<!--{$lang.page.table.yes}-->" <!--{if $datainfo.is_top eq 1}--> checked<!--{/if}-->>
              </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label"><!--{$lang.page.table.status}--></label>
                <div class="layui-input-block">
                  <input type="radio" name="status" value="0" title="<!--{$lang.page.table.close}-->" <!--{if $datainfo.status eq 0}--> checked<!--{/if}-->  >&nbsp;&nbsp;<input type="radio" name="status" value="1" title="<!--{$lang.page.table.normal}-->" <!--{if $datainfo.status eq 1}--> checked<!--{/if}-->>
                </div>
              </div>

            </div>
  
          <div class="layui-form-item">
            <div class="layui-inline" >
            <label class="layui-form-label"><!--{$lang.page.table.entryurl}--></label>
            <div class="layui-input-inline">
              <input type="text" name="url"  lay-verify="url" id="inputid" value="<!--{$datainfo.url}-->" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input">
            </div>
            </div>
            <div class="layui-inline">
            <label class="layui-form-label"><!--{$lang.page.table.sort}--></label>
            <div class="layui-input-inline">
              <input type="text" name="orderid"  lay-verify="orderid"  value="<!--{$datainfo.orderid}-->" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input">
            </div>
          </div> 
          </div>

          <div class="layui-form-item" id="submue">
          <table class="layui-table" id="sharetable" lay-filter="table">
                <thead>
                    <tr>
                        <td width="10%">key</td>
                        <td width="20%"><!--{$lang.page.table.name}--></td>
                        <td width="40%"><!--{$lang.page.table.entryurl}--></td>
                        <td width="20%"><!--{$lang.page.public.parameter}--></td>
                        <td width='10%'><a class="layui-btn layui-btn-xs addshare"><!--{$lang.page.public.add}--></a></td>
                    </tr>
                </thead>
                <tbody>
                    <!--{if empty($datainfo.operate)}-->
                     <tr>
                     <td><input type="text" name="operate[key][]" value="" lay-verify="operate" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input" /></td>
                     <td><input type="text" name="operate[name][]" value="" lay-verify="operate" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input" /></td>
                     <td><input type="text" name="operate[url][]" value="" lay-verify="operate" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input" /></td>
                     <td><input type="text" name="operate[value][]" value="" lay-verify="operate" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input" /></td>
                     <td><a class="layui-btn layui-btn-danger layui-btn-xs delshare"><!--{$lang.page.public.del}--></a></td>
                     </tr>
                     <!--{else}-->
                     <!--{foreach from=$datainfo.operate item=item}-->
                     <tr>
                     <td><input type="text" name="operate[key][]" value="<!--{$item.key}-->" lay-verify="operate" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input" /></td>
                     <td><input type="text" name="operate[name][]" value="<!--{$item.name}-->" lay-verify="operate" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input" /></td>
                     <td><input type="text" name="operate[url][]" value="<!--{$item.url}-->" lay-verify="operate" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input" /></td>
                     <td><input type="text" name="operate[value][]" value="<!--{$item.value}-->" lay-verify="operate" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input" /></td>
                     <td><a class="layui-btn layui-btn-danger layui-btn-xs delshare"><!--{$lang.page.public.del}--></a></td>
                     </tr>
                     <!--{/foreach}-->
                     <!--{/if}-->
                  </tbody>
                </table>
              </div>
    
          <div class="layui-form-item layui-layout-admin">
            <div>
              <div class="layui-footer" style="left: 0;">
                <button class="layui-btn" type="button" id="submit" lay-submit lay-filter="submit"><!--{$lang.page.public.submit}--></button>
                <button type="reset" class="layui-btn layui-btn-primary"><!--{$lang.page.public.reset}--></button>
                <button type="button" class="layui-btn layui-btn-primary" onClick="xadmin.close();" ><!--{$lang.page.table.back}--></button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

</body>
</html>
  <script src="/static/lay/layui/layui.js"></script>
  <script type="text/javascript">
    layui.config({
     base: '/static/lay/' //静态资源所在路径
   }).extend({
     xadmin: 'lib/xadmin' //弹窗
   }).use(['jquery', 'layer','xadmin', 'form'], function(){
    var form = layui.form;
     form.render(null, 'component-form-group');
     /* 自定义验证规则 */
    form.verify({

      title: function(value){
        if(value.length < 1){
          return '<!--{$lang.page.table.name}--> <!--{$lang.page.public.nocontent}-->';
        }
      }
      ,code: [/^\/[A-Za-z\/]+\/$/, '<!--{$lang.page.public.paraerror}-->，<!--{$lang.page.public.formaterror}-->/']
      ,langkey: [/^[a-zA-Z]+$/, '<!--{$lang.page.public.paraerror}-->']
      ,orderid: [/^[-\+]?\d+$/, '<!--{$lang.page.public.paraerror}-->']
      ,url: function(value){
        if(value.length < 1){
          return '<!--{$lang.page.table.entryurl}--> <!--{$lang.page.public.nocontent}-->';
        }
      }

    });

    if($("#inputid").val() == '#' || $("#inputid").val() == ''){
     $('#submue').hide(); 
    }else{
     $('#submue').show(); 
    };
    $("#inputid").on("input",function(e){
    //获取input输入的值
    if(e.delegateTarget.value =='#' || e.delegateTarget.value==''){
     $('#submue').hide(); 
    }else{
     $('#submue').show(); 
    };
    });

   //动态添加表单
   //因为动态添加的元素class属性是无效的，所以不能用$('.add').click(function(){});
    $('body').on('click', '.addshare', function() {
    //添加html
    var html = '<tr>'+
               '<td><input type="text" name="operate[key][]" value="" lay-verify="operate" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input" /></td>'+
               '<td><input type="text" name="operate[name][]" value="" lay-verify="operate" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input" /></td>'+
               '<td><input type="text" name="operate[url][]" value="" lay-verify="operate" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input" /></td>'+
               '<td><input type="text" name="operate[value][]" value="" lay-verify="operate" placeholder="<!--{$lang.page.public.pinput}-->" autocomplete="off" class="layui-input" /></td>'+
               '<td>'+'<a class="layui-btn layui-btn-danger layui-btn-xs delshare"><!--{$lang.page.public.del}--></a>'+
               '</td>'+
               '</tr>';
    //添加到表格最后
    $(html).appendTo($('#sharetable tbody:last'));
    form.render();
   });
   $('body').on('click', '.delshare', function() {
    if ($('#sharetable tbody tr').length === 1) {
        // layer.msg('只有一条不允许删除。', {
        //     time : 2000
        // });
        $(this).closest('tr').remove();
     } else {
        //删除当前按钮所在的tr
        $(this).closest('tr').remove();
     }
    });

    form.on('submit(submit)', function (data) {
        $('#submit').attr("disabled",true);
        $('#submit').addClass('layui-btn-disabled');
        $.post('#',data.field,function(res){
            if(res.code == 200){
                layer.msg(res.msg);
                setTimeout(() => {
                    window.parent.location.reload();
                    xadmin.close();
                }, 1000); 
            }else{
                layer.msg(res.msg);
            }
        })
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

  });

  </script>